App.require(function () {
    var app = App.getCurrent();
    app.defineComponent("str-date-area", {
        getDomObj: function () {
            this.attachDom("#startdate_1", "startdate")
                .attachDom("#enddate_1", "enddate")
                .attachDom('[role="daterange"]', "container")
                .attachDom(".str-date-area-help-container", "helpContainer")
                .attachDiyEvent("datetimerangepickerclear", this.clearHandler)
                .attachDiyEvent("datetimerangepickerclose", this.closeHandler)
                .attachDiyEvent("datetimerangepickersave", this.saveTimeHandler)
                .attachDiyEvent("daterangepickerclear", this.clearHandler)
                .attachDiyEvent("daterangepickerclose", this.closeHandler)
                .attachDiyEvent("daterangepickersave", this.saveHandler)
                .attachDiyEvent("datepickhiddenfromoutenv", this.closeHandler)
                .attachEvent("startdate", "textfocus", this.inputfocusHandler, false)
                .attachEvent("enddate", "textfocus", this.inputfocusHandler, false);
        },
        saveTimeHandler: function (ev) {
            var oldStartValue = this.domList.startdate.value,
                oldEndValue = this.domList.enddate.value;
            var startDate = ev.startDate, endDate = ev.endDate;
            var startTime = ev.startTime, endTime = ev.endTime;
            
            var newStartValue = [startDate.year, ("0" + startDate.month).slice(-2), ("0" + startDate.day).slice(-2)].join("-") + " " + [
                ("0" + startTime.hour).slice(-2),
                ("0" + startTime.minute).slice(-2)
            ].join(":");
            var newEndValue = [endDate.year, ("0" + endDate.month).slice(-2), ("0" + endDate.day).slice(-2)].join("-") + " " + [
                ("0" + endTime.hour).slice(-2),
                ("0" + endTime.minute).slice(-2)
            ].join(":");
            if (newStartValue !== oldStartValue || newEndValue !== oldEndValue) {
                this.dispatchCustomEvent("dateareachange", { component: this, start: newStartValue, end: newEndValue });
            }
            this.domList.startdate.value = newStartValue;
            this.domList.enddate.value = newEndValue;
        },
        clearHandler: function (ev) {
            var oldStartValue = this.domList.startdate.value,
                oldEndValue = this.domList.enddate.value;
            this.domList.startdate.value = "";
            this.domList.enddate.value = "";
            this.closeHandler();
            if (oldStartValue || oldEndValue) this.dispatchCustomEvent("dateareaclear", { component: this });
        },
        closeHandler: function (ev) {
            this.domList.startdate.removeEdit(null, true);
            this.domList.enddate.removeEdit(null, true);
        },
        saveHandler: function (ev) {
            var oldStartValue = this.domList.startdate.value,
                oldEndValue = this.domList.enddate.value;
            var startDate = ev.startDate, endDate = ev.endDate;
            var newStartValue = [startDate.year, ("0" + startDate.month).slice(-2), ("0" + startDate.day).slice(-2)].join("-");
            var newEndValue = [endDate.year, ("0" + endDate.month).slice(-2), ("0" + endDate.day).slice(-2)].join("-");
            if (newStartValue !== oldStartValue || newEndValue !== oldEndValue) {
                this.dispatchCustomEvent("dateareachange", { component: this, start: newStartValue, end: newEndValue });
            }
            this.domList.startdate.value = newStartValue;
            this.domList.enddate.value = newEndValue;
        },
        inputfocusHandler: function (ev) {
            if (this.property.readonly) return;
            var page = this._getPage();
            this.domList.startdate.setEdit(null, true);
            this.domList.enddate.setEdit(null, true);
            if (window.innerWidth < 800) {
                page.showPopUp("strdateRangePicker", { 
                    target: this,
                    title: "选择日期", 
                    startDate: this.domList.startdate.value, 
                    endDate: this.domList.enddate.value,
                    min: this.property.min,
                    max: this.property.max,
                    selectTime:  this.property.type != "date"
                });
            }
            else {
                page.showPopUp("pcstrdateRangePicker", { 
                    bindDom: this.nodes[0].querySelector("input"),
                    target: this,
                    title: "选择日期", 
                    startDate: this.domList.startdate.value, 
                    endDate: this.domList.enddate.value,
                    min: this.property.min,
                    max: this.property.max,
                    selectTime:  this.property.type != "date"
                });
            }
        },
        render: function (next) {
            this.computeData();
            this.fetch("index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        reset: function () {
            this.property.startvalue = this.domList.startdate.defaultValue;
            this.domList.startdate.reset();
            this.property.endvalue = this.domList.enddate.defaultValue;
            this.domList.enddate.reset();
        },
        computeData: function () {
            var property = this.property;
            property.startname = property.startname || this.uid + "-start";
            property.endname = property.endname || this.uid + "-end";
            property.required = typeof property.required !== "undefined" ? "required" : "";
            property.readonly = typeof property.readonly !== "undefined" ? "readonly" : "";
            property.disabled = typeof property.disabled !== "undefined" ? "disabled" : "";
            property.startlabel = property.startlabel || property.startname;
            property.endlabel = property.endlabel || property.endname;
            property.startvalue = property.startvalue || "";
            property.endvalue = property.endvalue || "";
            property.form = property.form || "";
            property.rendertype = property.rendertype || "filled";
            property.startplaceholder = property.startplaceholder || "";
            property.endplaceholder = property.endplaceholder || "";
            property.startleadicon = property.startleadicon || "";
            property.endleadicon = property.endleadicon || "";
            property.starttrailicon = property.starttrailicon || "";
            property.endtrailicon = property.endtrailicon || "";
            property.size = property.size || "normal";
            property.hiddenbottom = typeof property.hiddenbottom === "undefined" ? "" : "hiddenbottom";
            property.assistivetype = property.assistivetype || "help";
            property.assistivetext = property.assistivetext || "";
            property.class = property.class || "";
            property.min = property.min || "";
            property.max = property.max || "";
            property.type = property.type || "date";
            this.data.propertystr = this.createPropertyStr({
                class: property.class
            });
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get hiddenbottom() {
            return this.property.hiddenbottom;
        },
        set hiddenbottom(value) {
            value = value ? "hiddenbottom" : "";
            if (value === this.property.hiddenbottom) return;
            var classList = this.domList.helpContainer.classList;
            if (value) {
                classList.add(value);
            }
            else {
                classList.remove(value);
            }
            this.property.hiddenbottom = value;
        },
        set assistive(obj) {
            var property = this.property, oldType = property.assistivetype;
            var container = this.domList.helpContainer;
            if (!obj.type) {
                if (oldType) {
                    container.removeChild(container.firstElementChild);
                    this.domList.startdate.assistive = obj;
                    this.domList.enddate.assistive = obj;
                }
                property.assistivetext = obj.text;
                property.assistivetype = obj.type;
                return;
            }
            if (!oldType) {
                var div = document.createElement("div");
                div.className = "addtion-" + obj.type;
                div.textContent = obj.text;
                container.appendChild(div);
            }
            else {
                var target = container.firstElementChild;
                target.textContent = obj.text;
            }
            property.assistivetext = obj.text;
            property.assistivetype = obj.type;
            this.domList.startdate.assistive = obj;
            this.domList.enddate.assistive = obj;
        },
        get assistive() {
            var property = this.property;
            return {
                type: property.assistivetype,
                text: property.assistivetext
            }
        },
        get assistivetype() {
            return this.property.assistivetype;
        },
        get assistivetext() {
            return this.property.assistivetext;
        },
        get size() {
            return this.property.size;
        },
        set size(value) {
            this.property.size = value;
            this.domList.startdate.size = value;
            this.domList.enddate.size = value;
        },
        get startleadicon() {
            return this.property.startleadicon;
        },
        set startleadicon(value) {
            this.property.startleadicon = value;
            this.domList.startdate.leadicon = value;
        },
        get endleadicon() {
            return this.property.endleadicon;
        },
        set endleadicon(value) {
            this.property.endleadicon = value;
            this.domList.enddate.leadicon = value;
        },
        get starttrailicon() {
            return this.property.starttrailicon;
        },
        set starttrailicon(value) {
            this.domList.startdate.trailicon = value;
            this.property.starttrailicon = value;
        },
        get endtrailicon() {
            return this.property.endtrailicon;
        },
        set endtrailicon(value) {
            this.domList.enddate.trailicon = value;
            this.property.endtrailicon = value;
        },
        get rendertype() {
            return this.property.rendertype;
        },
        set rendertype(value) {
            value = value === "outline" ? "outline" : "filled";
            this.domList.startdate.rendertype = value;
            this.domList.enddate.rendertype = value;
            this.property.rendertype = value;
        },
        get form() {
            return this.property.form;
        },
        set form(value) {
            this.property.form = value;
            this.domList.startdate.form = value;
            this.domList.enddate.form = value;
        },
        get startlabel() {
            return this.property.startlabel;
        },
        set startlabel(value) {
            this.property.startlabel = value;
            this.domList.startdate.label = value;
        },
        get endlabel() {
            return this.property.endlabel;
        },
        set endlabel(value) {
            this.property.endlabel = value;
            this.domList.enddate.label = value;
        },
        get startvalue() {
            return this.property.startvalue;
        },
        set startvalue(value) {
            this.property.startvalue = value;
            this.domList.startdate.value = value;
        },
        get endvalue() {
            return this.property.endvalue;
        },
        set endvalue(value) {
            this.property.endvalue = value;
            this.domList.endata.value = value;
        },
        get disabled() {
            return this.property.disabled;
        },
        set disabled(value) {
            value = value ? "disabled" : "";
            this.property.disabled = value;
            this.domList.startdate.disabled = value;
            this.domList.enddate.disabled = value;
        },
        get required() {
            return this.property.required;
        },
        set required(value) {
            value = value ? "required" : "";
            this.property.required = value;
            this.domList.startdate.required = value;
            this.domList.enddate.required = value;
        },
        get startname() {
            return this.property.startname;
        },
        set startname(value) {
            this.domList.startdate.name = value;
            this.property.startname = value;
        },
        get endname() {
            return this.property.endname;
        },
        set endname(value) {
            this.domList.enddate.name = value;
            this.property.endname = value;
        }
    });
});